<template>
  <z-container>
    <z-header height="28px">bubble (气泡)</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">tooltip文字提示</z-col>
        <z-col :span="2">
            <z-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
            <z-button>上左</z-button>
          </z-tooltip>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">popover弹出框</z-col>
        <z-col :span="2">
          <z-popover placement="top-start" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <z-button slot="reference">content</z-button>
          </z-popover>
        </z-col>
        <z-col :span="2">
          <z-popover placement="top-start" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <z-button slot="reference">content+title</z-button>
          </z-popover>
        </z-col>
         <z-col :span="2">
          <z-popover placement="right" title="标题" width="400" trigger="hover">
            <z-table :data="gridData" small border>
              <z-table-column width="150" property="date" label="日期"></z-table-column>
              <z-table-column width="100" property="name" label="姓名"></z-table-column>
              <z-table-column width="300" property="address" label="地址"></z-table-column>
            </z-table>
            <z-button slot="reference">嵌套</z-button>
          </z-popover>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">Popconfirm(气泡确认)</z-col>
        <z-col :span="2">
          <z-popconfirm title="这是一段内容确定删除吗？">
            <z-button slot="reference">删除</z-button>
          </z-popconfirm>
        </z-col>
      </z-row>
  </z-main>
  </z-container>
  
  
</template>
<script>
export default{
  name:'cBubble',
  data(){
    return {
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
    }
  },
  mounted() {
    
  },
  methods: {
  
  },
}
</script>